<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4.神奇的标签模板实例操作 </title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
      font-size: 15px;
    }

    a {
      text-decoration: none;
      color: yellow;
    }


    li:nth-child(odd) {
      background-color: aquamarine;
      color: white;
      padding: 10px;
    }
  </style>
</head>

<body>
  <script>

    /* let lesson = 'css';
        let web = '后盾人';
       // tag`访问${web}学习${lesson}前端知识`;
       tag`${web}`;
      
  
        function tag (strings, ...values) {
          console.log(strings); //["访问", "学习", "前端知识"]
          console.log(values); // ["后盾人", "css"]
        }*/


    let lessons = [
      { title: "后盾人媒体查询响应式布局", author: "后盾人向军" },
      { title: "FLEX 弹性盒模型", author: "后盾人" },
      { title: "GRID 栅格系统后盾人教程", author: "古老师" }
    ];

    function template () {
      return `<ul>
        ${lessons.map((item) =>
        links`<li>作者：${item.author},课程：${item.title}`)
          .join("")}
      </ul>`
    }

    function links (strings, ...vars) {
      return strings
        .map((str, key) => {
          return (
            str +
            (vars[key]
              ? vars[key].replace("后盾人",
                '<a href="https://www.houdunren.com">后盾人</a>'
              ) : "")
          );
        })
        .join("");
    }
    document.body.innerHTML = template();
  </script>
</body>

</html>